<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title></title>
		<!-- Bootstrap Styles-->
		<link href="/css/bootstrap.css" rel="stylesheet" />
		<!-- FontAwesome Styles-->
		<link href="/css/font-awesome.css" rel="stylesheet" />
		<!-- Morris Chart Styles-->
		<!-- Custom Styles-->
		<link href="/css/custom-styles.css" rel="stylesheet" />
		<!-- Google Fonts-->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
		<!-- TABLE STYLES-->
		<link href="/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
	</head>
	<body>
		<div id="wrapper">
			<!--topbar-->
			<div th:replace="bar::topbar"></div>
			<!--    sidebar-->
			<div th:replace="bar::sidebar(activeUri='/front/user')"></div>
			<!-- /. NAV SIDE  -->
			<div id="page-wrapper">
				<div id="page-inner">
					<div class="row">
						<div class="col-md-12">
							<h1 class="page-header">
								<small></small>
							</h1>
						</div>
					</div>
					<!-- /. ROW  -->
					<!--  Modals-->

					<div class="panel-body">




						<form method="post" th:action="@{/front/save}" class="form-horizontal" role="form" id="myForm" onsubmit="return ">
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
						 style="display: none;">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
										<h4 class="modal-title" id="myModalLabel">新增用户</h4>
									</div>
									<div class="modal-body">
										<div class="row" style=" position:relative;left:60px;">
										<form class="form-horizontal" role="form">
										<input type="hidden" class="form-control" name="userId" id="edit_userId">
										<div class="form-group">
											<label>帐号</label>
											<input type="text" class="form-control" name="userAccount" id="edit_account">
										</div>
										<div class="form-group">
											<label>密码</label>
											<input class="form-control" type="text" name="userPassword" id="edit_password">
										</div>
										<div class="form-group">
											<label>用户名</label>
											<input class="form-control" type="text" name="userName" id="edit_name">
										</div>
										<div class="form-group">
											<label>年龄</label>
											<input class="form-control" type="text" name="userAge" id="edit_age">
										</div>
										<div class="form-group">
											<label>性别</label>
											<select class="form-control" name="userSex" id="edit_sex">
												<option>男</option>
												<option>女</option>
											</select>
<!--											<input class="form-control" type="text" >-->
										</div>
										<div class="form-group">
											<label>电话</label>
											<input class="form-control" type="text" name="userTelephone" id="edit_telephone">
										</div>
										<div class="form-group">
											<label>邮箱</label>
											<input class="form-control" type="text" name="userEmail" id="edit_email">
										</div>
										<div class="form-group">
											<label>住址</label>
											<input class="form-control" type="text" name="userAddress" id="edit_Address">
										</div>
										<div class="form-group">
											<label>领养经历</label>
											<select class="form-control" name="userState" id="edit_state">
												<option>有领养经历</option>
												<option>无领养经历</option>
											</select>
<!--											<input class="form-control" type="text" name="userState" id="edit_state">-->
										</div>
										</form>
										</div>
									</div>
									<div style="padding: 20px;position: relative;left: 420px;">
										<button type="reset" class="btn btn-default">重置</button>
										<button type="submit" class="btn btn-primary">保存</button>
									</div>
								</div>
							</div>
						</div>
						</form>
					</div>

					<!-- End Modals-->

					<div class="row">
						<div class="col-md-12">
							<!-- Advanced Tables -->
							<div class="panel panel-default">
								<div class="panel-heading">
									<div>
										<form method="get" th:action="@{/front/user}" style="display: inline">
											<span style="margin-right: 50px;">用户信息表</span>
											<input type="text" class="form-control"  name="searchName" id="searchName" placeholder="输入姓名搜索" style="display: inline;width: 20%">
											<button type="submit" class="btn btn-info">搜索</button>
										</form>
										<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加用户</button>
									</div>
								</div>

								<div class="panel-body">
									<div class="table-responsive">
										<table class="table table-striped table-bordered table-hover" id="dataTables-example">
											<thead>
												<tr>
												    <th>用户账户</th>                                  
												    <th>用户姓名</th>
												    <th>年龄</th>
													<th>性别</th>
												    <th>联系方式</th>
												    <th>邮箱</th>
													<th>地址</th>
													<th>领养情况</th>
												    <th>操作</th> 
												</tr>
											</thead>
											<tbody>
												<tr th:each="user:${pagelist.list}">
												    <td><span th:text="${user.userAccount}"></span></td>
													<td><span th:text="${user.userName}"></span></td>
													<td><span th:text="${user.userAge}"></span></td>
												    <td><span th:text="${user.userSex}"></span></td>
												    <td><span th:text="${user.userTelephone}"></span></td>
												    <td><span th:text="${user.userEmail}"></span></td>
												    <td><span th:text="${user.userAddress}"></span></td>
													<td><span th:text="${user.userState}"></span></td>
													<td style="display: none"><span th:text="${user.userId}"></span></td>
													<td style="display: none"><span th:text="${user.userPassword}"></span></td>
												    <td>
														<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="edit_user(this)">修改</button>
														<button class="btn btn-danger">
															<a th:href="@{/front/delete(userId=${user.userId})}" style="text-decoration-line: none;color: white">删除</a>
														</button>

													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!--                            引入分页-->
									<div th:replace="~{pagination::pag}"></div>
								</div>
							</div>
							<!--End Advanced Tables -->
						</div>
					</div>
					<!-- /. ROW  -->

				</div>
			</div>
			<!-- /. PAGE INNER  -->
		</div>
		<!-- /. PAGE WRAPPER  -->
		<!-- /. WRAPPER  -->
		<!-- JS Scripts-->
		<!-- jQuery Js -->
		<script src="/js/jquery-1.10.2.js"></script>
		<!-- Bootstrap Js -->
		<script src="/js/bootstrap.min.js"></script>
		<!-- Metis Menu Js -->
		<script src="/js/jquery.metisMenu.js"></script>
		<!-- DATA TABLE SCRIPTS -->
		<script src="/js/dataTables/jquery.dataTables.js"></script>
		<script src="/js/dataTables/dataTables.bootstrap.js"></script>
		<script>
			$(document).ready(function() {
				$('#dataTables-example').dataTable({
					"ordering": false,
					"searching": false
				});
			});
			function edit_user(obj){
				var $td= $(obj).parents('tr').children('td');
				var td_account = $td.eq(0).text();
				var td_name = $td.eq(1).text();
				var td_age = $td.eq(2).text();
				var td_sex = $td.eq(3).text();
				var td_telephone = $td.eq(4).text();
				var td_email = $td.eq(5).text();
				var td_Address = $td.eq(6).text();
				var td_State=$td.eq(7).text();
				var td_id=$td.eq(8).text();
				var td_pwd=$td.eq(9).text();

				$("#edit_account").val(td_account);
				$("#edit_name").val(td_name);
				$("#edit_age").val(td_age);
				$("#edit_sex").val(td_sex);
				$("#edit_telephone").val(td_telephone);
				$("#edit_email").val(td_email);
				$("#edit_Address").val(td_Address);
				$("#edit_state").val(td_State);
				$("#edit_userId").val(td_id);
				$("#edit_password").val(td_pwd);
			}
		</script>
		<!-- Custom Js -->
		<script src="/js/custom-scripts.js"></script>


	</body>
</html>
